import { useState, useEffect } from 'react'
import { Input } from 'tdesign-react'
import styles from './index.module.less'

type PropsType = {
  onChange?: Function
  value?: DictionaryListType
  index: number
}

const AddDictionaryOption = (props: PropsType) => {

  const { onChange = () => { }, value = [], index } = props
  // value 是所有选项组成的数组
  // name => label

  const onOptionChange = (event: any, valueKey: 'label' | 'value') => {
    let _dictionaryArray: DictionaryListType = value ? JSON.parse(JSON.stringify(value)) : []
    _dictionaryArray[index] = {
      label: valueKey == 'label' ? event : (value[index]?.label || ''),
      value: valueKey == 'value' ? event : (value[index]?.value || '')
    }
    onChange && onChange(_dictionaryArray)
  }

  return <div className={styles.addDictionaryOption}>
    <span className={styles.dictionaryItemTitle}>字典项{index + 1}</span>
    <Input
      className={styles.dictionaryItemName}
      placeholder='请输入字典项名称'
      value={value[index]?.label || ''}
      onChange={(event) => { onOptionChange(event, 'label') }}
    />
    <Input
      className={styles.dictionaryItemValue}
      placeholder='请输入字典项值'
      value={value[index]?.value || ''}
      onChange={(event) => { onOptionChange(event, 'value') }}
    />
  </div>
}

export default AddDictionaryOption
